<template>
    <!-- 学习中心 -->
    <div class="wrap">
        
        <div class="con">
            <div class="tabLeft">
                <ul>
                    <li :class="tabNum == 0 ? 'seleTabSetAccounts pseudo' : 'tabSetAccounts'" @click="tabSwitch(0)">设置分帐号</li>
                    <li :class="tabNum == 1 ? 'seleTabCourseProgress pseudo' : 'tabCourseProgress'" @click="tabSwitch(1)">课程学习进度</li>
                    <li :class="tabNum == 2 ? 'seleTabProjectTasks pseudo' : 'tabProjectTasks'" @click="tabSwitch(2)">项目任务情况</li>
                    <li :class="tabNum == 3 ? 'seleTabExportData pseudo' : 'tabExportData'" @click="tabSwitch(3)">导出数据PDF</li>
                </ul>
            </div>
            <div class="tabRight">
                <!-- 设置分帐号 -->
                <div class="setAccounts" v-if="tabNum == 0">
                    <h2>设置分帐号</h2>
                    <span>姓名:</span>
                    <p>张三</p>
                    <span>联系方式:</span>
                    <p>88888888888</p>
                    <span>院校系:</span>
                    <p>清华大学计算机系</p>
                    <span>授课课程:</span>
                    <p><br><br><br><br><br></p>


                    <!-- 分帐号列表 -->
                    <div class="fenList" v-if="pageNum == 0">
                        <h2>分帐号列表:</h2>
                        <span>姓名</span>
                        <span>院校系</span>
                        <span>授课过程</span>
                        <span>操作</span>
                        <hr>
                        <ul >
                            <li v-for="(list,index) in stuLists" :key="list.id"> 
                               <p> {{list.name}} </p>
                               <p> {{list.professional}}</p>
                               <p> <el-button type="warning"  @click="dialogFormVisible = true">查看</el-button></p>
                               <p> <el-button type="danger" @click="dele(index)">删除</el-button></p>
                            </li>
                        </ul> 

                        <el-dialog class="toView" title="" :visible.sync="dialogFormVisible" >
                            <h2 style="text-align:center; font-size:23px; color:blue;">授课课程</h2>
                            <ul>
                                <li v-for="(course,name) in courses" :key="name">
                                     <p>{{ course.name}}</p>
                                </li>
                            </ul>
                            <div  class="dialog-footer" style="text-align: center;">
                                <el-button style="background-color:#0651b4; color:#fff; font-size:18px;" @click="dialogFormVisible = false">确 定</el-button>
                             </div>
                        </el-dialog>

                    </div>

                </div>

                <!-- 课程学习进度 -->
                <div class="courseProgress" v-if="tabNum == 1">
                    <h2>课程学习进度</h2>
                    <label for="">课程:</label>
                        <select id="userCouse" v-model="downOptions">
                            <option value ='1' selected='selected'>HTML的概述</option>
                            <option value ="2" >JS的概述</option>
                        </select>

                    <!-- HTML的概述 -->
                    <div class="stuHtml"  v-if="downOptions == 1">
                            <span>姓名</span>
                            <span>院系</span>
                            <span>课程进度</span> 
                        <hr>
                        <ul >
                            <li v-for="(stuHtml,id) in stuLists" :key="id">
                                <p>{{stuHtml.name}}</p>  
                                 <p>{{stuHtml.professional}}</p>
                                 <p :class="stuHtml.speed === '完成' ? ' styleGreen' : 'styleRed'">{{ stuHtml.speed}}</p>
                            </li>
                        </ul>
                    </div>

                    <div class="stuJS" v-if="downOptions == 2"></div>
                </div>

                <!-- 项目任务情况 -->
                <div class="projectTasks" v-if="tabNum == 2">
                        <h2>各院系学生项目情况</h2>
                        <label for="">系别:</label>
                        <select id="useryuanXi" v-model="downOptions">
                            <option value ="1" >计算机系</option>
                            <option value ="2" >软件工程系</option>
                        </select>

                        <!-- 计算机系 -->
                        <div class="computerDepartment"  v-if="downOptions == 1">
                                <span>姓名</span>
                                <span>项目</span>
                            <hr>
                            <ul >
                                <li v-for="(datailJisuan,id) in detailLists" :key="id">
                                    <p>{{datailJisuan.name}}</p>  
                                        <p>{{datailJisuan.project}}</p>
                                </li>

                            </ul>
                        </div>

                </div>

                <!-- 导出数据PDF -->
                <div class="exportData" v-if="tabNum == 3">
                    <div class="exportHome" v-if="pageNum == 0">
                        <h2>职业介绍</h2>
                        <ul>
                            <li @click="pageTurn(31)">
                                <p>简历类导出</p>
                            </li>
                            <li @click="pageTurn(32)">
                                <p>统计数据导出</p>
                            </li>
                        </ul>
                    </div>

                    <!-- 简历导出页内跳转 -->
                    <div class="exportResume" v-if="pageNum == 31">
                        <h2>简历类导出</h2>
                        <span>姓名</span>
                        <span>院系</span>
                        <span>课程进度</span> 
                        <hr>
                        <ul >
                            <li v-for="(stuResume,index) in stuLists" :key="stuResume.id">
                                <p>{{stuResume.name}}</p>  
                                 <p>{{stuResume.professional}}</p>
                                 <p> 
                                     <el-button type="warning" >导出</el-button>
                                </p>
                                 <div class="choose"  @click="hookChoose(index)">
                                        <div class="choose1" >
                                        <div class="box1"></div> 
                                        <img src="../assets/hook.png" alt="" :class=" stuResume.state ? 'choose1 hook1' : 'choose1 nonehook'">
                                        </div>
                                    <!-- <div class="choose2" >class="nonehook" :class=" {hook1 : hook} "
                                        <div class="box1" @click="hookChoose(1)"></div></div>
                                        <img src="../assets/hook.png" alt="" :class=" hook === 1 ? 'choose1 hook2' : 'choose1 nonehook'">
                                        <div class="no">否</div> -->
                                </div>

                            </li>
                        </ul>
                            <div class="allDiv"><el-button  type="primary" @click="allDiv()">全选</el-button></div>
                            <div class="pageBtn">
                                <div class="pageBtn1"> <el-button  type="danger" @click="pageTurn(0)">返回上一级</el-button></div>
                                <div class="pageBtn2"><el-button type="warning" >批量导出</el-button></div>
                            </div>
                    </div>

                    <!-- 统计数据页内跳转 -->
                    <div class="statistics" v-if="pageNum == 32">
                        <h2>统计数据导出</h2>
                        <span>学生姓名</span>
                        <span>专业年级</span>
                        <span>学号</span> 
                        <span>参加任务总时长</span>
                        <span>技术能力</span>
                        <hr>
                        <ul >
                            <li v-for="(statistic,id) in stuLists" :key="id">
                                <p>{{statistic.name}}</p>  
                                 <p>{{statistic.professional}}</p>
                                 <p>{{statistic.stuID}}</p>
                                 <p>{{statistic.timeLength}}</p>
                                 <p style="color:#ff0000;">{{statistic.access}}</p>
                            </li>
                        </ul>
                            <div class="pageBtn">
                                <div class="pageBtn1"> <el-button  type="danger" @click="pageTurn(0)">返回上一级</el-button></div>
                                <div class="pageBtn2"><el-button type="warning" >导出PDF文件</el-button></div>
                            </div>
                    </div>

                </div>

            </div>

        </div>

    </div>
</template>

<script>

import { all } from 'q';
export default {
    data() {
        return {
            tabNum: 0,
            pageNum: 0,
            downOptions:1,
            stuLists: [
                {
                    id:0,
                    name:"张三",
                    professional:"计算机专业",
                    speed:'进行中',
                    stuID:'6666666',
                    timeLength:'50小时',
                    access:'A',
                    state: false
                },
                {
                    id:1,
                    name:"张三",
                    professional:"计算机专业",
                    speed:'完成',
                    stuID:'6666666',
                    timeLength:'50小时',
                    access:'A',
                    state: false
                },
                {
                    id:2,
                    name:"张三",
                    professional:"计算机专业",
                    speed:'完成',
                    stuID:'6666666',
                    timeLength:'50小时',
                    access:'A',
                    state: false
                },
                {
                    id:3,
                    name:"张三",
                    professional:"计算机专业",
                    speed:'完成',
                    stuID:'6666666',
                    timeLength:'50小时',
                    access:'A',
                    state: false
                },
                {
                    id:4,
                    name:"张三",
                    professional:"计算机专业",
                    speed:'完成',
                    stuID:'6666666',
                    timeLength:'50小时',
                    access:'A',
                    state: false
                },
                {
                    id:5,
                    name:"张三",
                    professional:"计算机专业",
                    speed:'完成',
                    stuID:'6666666',
                    timeLength:'50小时',
                    access:'A',
                    state: false
                },
                {
                    id:6,
                    name:"张三",
                    professional:"计算机专业",
                    speed:'完成',
                    stuID:'6666666',
                    timeLength:'50小时',
                    access:'A',
                    state: false
                },
                {
                    id:7,
                    name:"张三",
                    professional:"计算机专业",
                    speed:'完成',
                    stuID:'6666666',
                    timeLength:'50小时',
                    access:'A',
                    state: false
                },
                {
                    id:8,
                    name:"张三",
                    professional:"计算机专业",
                    speed:'完成',
                    stuID:'6666666',
                    timeLength:'50小时',
                    access:'A',
                    state: false
                },
                {
                    id:9,
                    name:"张三",
                    professional:"计算机专业",
                    speed:'完成',
                    stuID:'6666666',
                    timeLength:'50小时',
                    access:'A',
                    state: false
                },
                {
                    id:10,
                    name:"张三",
                    professional:"计算机专业",
                    speed:'完成',
                    stuID:'6666666',
                    timeLength:'50小时',
                    access:'A',
                    state: false
                },
                {
                    id:11,
                    name:"张三",
                    professional:"计算机专业",
                    speed:'完成',
                    stuID:'6666666',
                    timeLength:'50小时',
                    access:'A',
                    state: false
                },
                {
                    id:12,
                    name:"张三",
                    professional:"计算机专业",
                    speed:'完成',
                    stuID:'6666666',
                    timeLength:'50小时',
                    access:'A',
                    state: false
                },
                {
                    id:13,
                    name:"张三",
                    professional:"计算机专业",
                    speed:'完成',
                    stuID:'6666666',
                    timeLength:'50小时',
                    access:'A',
                    state: false
                },
                {
                    id:14,
                    name:"张三",
                    professional:"计算机专业",
                    speed:'完成',
                    stuID:'6666666',
                    timeLength:'50小时',
                    access:'A' ,
                    state: false   
                },
            ],

            detailLists: [
                {
                    project:"建立购物网站",
                    name:'张三'
                },
                {
                    project:"建立购物网站",
                    name:'张三'
                },
                {
                    project:"建立购物网站",
                    name:'张三'
                },
                {
                    project:"建立购物网站",
                    name:'张三'
                },
                {
                    project:"建立购物网站",
                    name:'张三'
                },
                {
                    project:"建立购物网站",
                    name:'张三'
                },
                {
                    project:"建立购物网站",
                    name:'张三'
                },
                {
                    project:"建立购物网站",
                    name:'张三'
                },
                {
                    project:"建立购物网站",
                    name:'张三'
                },
                {
                    project:"建立购物网站",
                    name:'张三'
                },
                {
                    project:"建立购物网站",
                    name:'张三'
                },
                {
                    project:"建立购物网站",
                    name:'张三'
                },
            ],
            
            courses:[
                {
                    name:'响应式Web设计'
                },
                {
                    name:'响应式Web设计'
                },
                {
                    name:'响应式Web设计'
                },
                {
                    name:'响应式Web设计'
                },
                {
                    name:'响应式Web设计'
                },
                {
                    name:'响应式Web设计'
                },
                {
                    name:'响应式Web设计'
                },
            ],

            dialogFormVisible: false,
        }
    },
    
    
    methods: {
        tabSwitch(num) {
            this.tabNum = num;
        },
        pageTurn(num) {
            this.pageNum = num;
        },
       /*删除按钮 */
        dele(index){
            this.stuLists.splice(index,1);
        },

        hookChoose(index) {
            this.stuLists[index].state = !this.stuLists[index].state;
        },
        allDiv(){
            for(var i =0; i < this.stuLists.length; i++)
            {
                this.stuLists[i].state = true;
            }
        }


    }
}
</script>

<style scoped>
.wrap {
    width: 100%;
    height: 100%;
}

.con {
    display: flex;
    width: 1200px;
    margin: 20px auto 0;
    box-shadow: 1px 3px 9px #ddd;
    border-radius: 10px;
}

.tabLeft li {
    position: relative;
    width: 210px;
    padding-left: 25px;
    line-height: 85px;
    font-size: 21px;
    color: #b3bdc9;
    text-align: center;
    list-style-type: none;
}

.tabRight {
    width: 100%;
    background-color: #fff;
}

.tabSetAccounts {
    background: url('../assets/账号-1.png') 30px center no-repeat;
    background-size: 26px 28px;
}

.seleTabSetAccounts {
    color: #0087cf !important;
    background: #fff url('../assets/账号.png') 30px center no-repeat;
    background-size: 26px 28px;
}

.tabCourseProgress {
    background: url('../assets/课程2.png') 30px center no-repeat;
    background-size: 25px 30px;
}

.seleTabCourseProgress {
    color: #0087cf !important;
    background: #fff url('../assets/课程-2.png') 30px center no-repeat;
    background-size: 25px 30px;
}

.tabProjectTasks {
    background: url('../assets/项目.png') 30px center no-repeat;
    background-size: 27px 27px;
}

.seleTabProjectTasks {
    color: #0087cf !important;
    background: #fff url('../assets/项目-1.png') 30px center no-repeat;
    background-size: 27px 27px;
}

.tabExportData {
    background: url('../assets/s-导出.png') 30px center no-repeat;
    background-size: 27px 27px;
}

.seleTabExportData {
    color: #0087cf !important;
    background: #fff url('../assets/s-导出-1.png') 30px center no-repeat;
    background-size: 27px 27px;
}


.pseudo::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0px;
    width: 8px;
    height: 85px;
    background-color: #0087cf;
}

.tabRight {
    padding: 30px 25px;
}

.tabRight h2 {
    font-weight: 500;
    font-size: 28px;
    margin-bottom: 18px;
}

.setAccounts span {
     font-size: 23px;
    color: #5e5e5e;
    line-height: 50px;
}
 
.setAccounts p{
    width: 300px;
    margin-bottom: 15px;
    padding: 0 20px;
    line-height: 50px;
    background-color: #f2f6f7;
    color: #5e5e5e;
}

hr {
    background-color: #0087cf;
    height: 3px;
}

.projectTasks {
    width: 100%
}

.projectTasks  ul {
    width: 100%;
}

.computerDepartment span {
    display: inline-block;
    width: 49%;
    font-size: 23px;
    color: #0087cf;
    line-height: 35px;
    text-align: center;
}

.computerDepartment ul li p{
    width: 49%;
    display: inline-block;
    line-height: 50px;
    list-style: none;   
    font-size: 18px;
    text-align: center;
}


.stuHtml span {
    display: inline-block;
    width: 31%;
    font-size: 23px;
    color: #0087cf;
    line-height: 35px;
    text-align: center;
}

.stuHtml ul li  p{
    width: 31%;
    display: inline-block;
    line-height: 50px;
    font-size: 18px;
    text-align: center;
    background-color: #fff;
}

.stuHtml div {
    float: right;
    margin-top: 2%;
}


 .fenList span {
     display: inline-block;
    width: 24%;
    font-size: 23px;
    color: #0087cf;
    line-height: 35px;
    text-align: center;
 }

 .fenList ul li  p{
     width: 19.5%;
    display: inline-block;
    line-height: 50px;
    list-style: none;
    font-size: 18px;
    text-align: center;
    background-color: #fff;
 }

 .toView ul {
     text-align: center;
 }
 
 .toView ul li p {
    font-size: 23px;
    color: #000000;
    width: 25%;
    display: inline-block;
    line-height: 30px;
    text-align: center;
    background-color: #fff;
 }


.styleGreen {
  color: #1de258 ;
}

.styleRed {
  color: #ff0000 ;
}

.exportHome ul {
    width: 100%;
    margin-top: 5%;
    margin-left: 5%
}

.exportHome li {
   list-style-type: disc;
   color: #0087cf;
} 

.exportHome li p {
    font-size: 23px;
    color: #000;
}

.exportResume span {
    display: inline-block;
    width: 33%;
    font-size: 23px;
    color: #0087cf;
    line-height: 35px;
    text-align: center;
}

.exportResume ul li p{
    width: 33%;
    display: inline-block;
    line-height: 50px;
    list-style: none;   
    font-size: 18px;
    text-align: center;
}

.exportResume .pageBtn {
    margin-top: 10%;
}

.exportResume .allDiv {
    float: right;
    margin-right: 6%;
    line-height: 80px;
}

.exportResume .pageBtn .pageBtn1{
    width: 20%;
    margin-left: 12%;
    display: inline-block;
}
.exportResume .pageBtn .pageBtn2 {
    width: 20%;
    margin-left: 46.5%;
    display: inline-block;
}

.statistics span {
    display: inline-block;
    width: 19%;
    font-size: 23px;
    color: #0087cf;
    line-height: 35px;
    text-align: center;
}

.statistics ul li p{
    width: 19%;
    display: inline-block;
    line-height: 50px;
    list-style: none;   
    font-size: 18px;
    text-align: center;
}

.statistics .pageBtn {
    margin-top: 10%;
}

.statistics .allDiv {
    float: right;
    margin-right: 6%;
    line-height: 80px;
}

.statistics .pageBtn .pageBtn1{
    width: 20%;
    margin-left: 12%;
    display: inline-block;
}
.statistics .pageBtn .pageBtn2 {
    width: 20%;
    margin-left: 46.5%;
    display: inline-block;
}



/* 勾选按钮 */
.choose{
    position: relative;
    width: 200px;
    height: 95px;
    margin-left: 91%;
    margin-top: -7.5%;
    
  }
  .choose1 {
    float: left;
    width: 50px;
    height: 50px;
    border-radius: 5px;
    margin-left: -9px;
    margin-top: 20px;
  }
  .choose2 {
    float: right;
    width: 50px;
    height: 50px;
    border-radius: 5px;

    margin: 20px 20px 0 20px;
  }
  .box1{
    margin:15px auto;
    width: 25px;
    height: 25px;
    background-color: #a4adb1;
    border-radius: 5px;
  }
  .hook1{
    position: absolute;
    top: -7px;
    left: 9px;
    width: 50px;
    height: 50px;
    display: block !important;
  }
  /* .hook2{
    position: absolute;
    top: -8px;
    left: 147px;
    width: 50px;
    height: 50px;
  } */
  .nonehook{
    display: none;
  }
  .yes{
    position: absolute;
    font-size: 30px;
    top: 25px;
    left: 45px;
  }
  /* .no{
    position: absolute;
    font-size: 30px;
    top: 25px;
    left: 180px;
  } */

.courseProgress select,.projectTasks select{
    color: #0087cf;
    font-size: 17px;
    border:2px solid #0087cf;
    border-radius: 5%;
    width: 18%;
    height: 32px;
    margin-bottom: 20px;
}

.courseProgress select option , .projectTasks select option {
    height: 100px;
}

</style>